import { useState } from "react";
import { Button, Form, Input } from "antd";
import { apiReqs } from "@/api";
import { useNavigate } from "react-router-dom";
import { KeyOutlined, UserOutlined } from "@ant-design/icons";
import imgLogo from "@/common/images/logo.png";
import imgCover from "./cover.svg";
import "./index.less";

const Login = () => {
  const [loading, setLoading] = useState(false);

  const navigate = useNavigate();

  const loginSubmit = (values) => {
    setLoading(true);

    let data = {
      account: values.account,
      password: values.password,
    };

    // console.log("submitData", data);
    apiReqs.signIn({
      data,
      success: (res) => {
        console.log(res);
        navigate("/home");
      },
    });
  };

  return (
    <div className="P-login">
      <div className="login-con">
        <div className="cover-con">
          <img src={imgLogo} className="img-logo" />
          <h2>Vite React Admin</h2>
          <img src={imgCover} className="img-cover" />
          {/* <div className="m-footer"></div> */}
        </div>
        <div className="pannel-con">
          <h3>Welcome!</h3>
          <p className="subtext">请登录您的账号</p>
          <Form onFinish={loginSubmit}>
            <Form.Item
              name="account"
              rules={[{ required: true, message: "请输入账号" }]}
            >
              <Input
                size="large"
                placeholder="请输入账号"
                prefix={<UserOutlined />}
                autoComplete="account"
              ></Input>
            </Form.Item>
            <Form.Item
              name="password"
              rules={[{ required: true, message: "请输入密码" }]}
            >
              <Input.Password
                size="large"
                placeholder="请输入密码"
                prefix={<KeyOutlined />}
                autoComplete="password"
              ></Input.Password>
            </Form.Item>
            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                size="large"
                block={true}
                loading={loading}
              >
                登录
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  );
};

export default Login;
